<template>
  <div class="add-desk">
    <mt-header :title="title">
      <router-link to="/desk" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    
    <div class="add-desk-list">
      <mt-field label="餐桌名称" placeholder="请输入餐桌名称" v-model="name"></mt-field>
      <mt-field label="餐桌描述" type="text" placeholder="请输入餐桌描述" v-model="des"></mt-field>
      <mt-field label="餐桌容量" type="text" placeholder="请输入餐桌可容纳的人数" v-model="num"></mt-field>
      <div class="mj">
        <p class="title-p">所在楼层</p>
        <div class="mj-input" @click="choselou">
          <input type="text" placeholder="请选择所在楼层" v-model="selectText">
        </div>
      </div>
      <mt-button class="btn-tj" type="primary" @click="tj">提交</mt-button>
    </div>
    <mt-popup class="pop-div" v-model="desknumVisible" position="bottom">
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
import {check_empty} from 'common/js/help.js'
import {axiosNet} from 'common/js/nethelp.js'
export default {
  data() {
      return {
        name:'',
        des:'',
        num:'',
        title:'添加餐桌',
        desknumVisible:false,
        category:[],
        categoryArr:[],
        catname:'请选择',
        couponid:0,
        showsele:false,
        condition:'',
        fee:'',
        startdate:'',
        enddate:'',
        status:'',
        selectText:'1楼',
        slots: [
            {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center'
            }
        ]
      }
    },
    mounted() {
      this.couponid = this.$route.params.id
      if(this.couponid != 0){
        this.title = "修改餐桌信息"
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"desk_id" : this.couponid}
        axiosNet("/Shop/desk_info",params,(data) => {
          let info = data.data.info
          this.name = info.name
          this.des = info.description
          this.num = info.container
          this.selectText = info.floor
        })
        // axios.post(HOST + "/Shop/desk_info",params).then((res) => {
        //   res = res.data
        //   let result = res.result
        //   if(result == 'success'){
        //     let info = res.data.info
        //     this.name = info.name
        //     this.des = info.description
        //     this.num = info.container
        //     this.selectText = info.floor
        //   }else{
        //     Toast({
        //       message:result.message,
        //       position:'bottom',
        //       duration:'2000'
        //     })
        //   }
          
        // })
      }
      let token = localStorage.getItem("access_token");
      axios.post(HOST + "/Shop/get_floor").then((res) => {
        res = res.data
        let result = res.result
        console.log(res.data.list)
        if(result == 'success'){
          let arr = res.data.list
          for(let a of arr){
            this.slots[0].values.push(a.name)
          }
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },
    methods: {
      choselou(){
        this.desknumVisible = true
      },
      onValuesChange(picker, values) {
        if(values[0]){
            this.selectText = values[0];
        }
          
      } ,
      tj(){
        if(check_empty(this.name)){
          Toast({
            message: '餐桌名称不能是空'
          });
          return
        }
        
        if(this.couponid!=0){
          //这是修改
          let token = localStorage.getItem("access_token");
          let params = {"access_token": token,
            "desk_id" : this.couponid,
            "name" : this.name,
            "container":this.num,
            "floor":this.selectText,
            "description":this.des}
          axios.post(HOST + "/Shop/init_desk",params).then((res) => {
            res = res.data
            if(res.result == 'success'){
              this.$router.push('/desk')
            }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
          })
        }else{
          //这是添加
          let token = localStorage.getItem("access_token");
          let params = {"access_token": token,
            "name" : this.name,
            "container":this.num,
            "floor":this.selectText,
            "description":this.des}
          axios.post(HOST + "/Shop/add_desk",params).then((res) => {
            res = res.data
            if(res.result == 'success'){
              this.$router.push('/desk')
            }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
          })
        }
      }
    },
    components:{
    }
}
</script>

<style lang="stylus">
.add-desk
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#26a2ff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee
    color:#fff
    height 44px
    label,span
      color:#fff
  .add-desk-list
    .mj
      display: flex
      background: #fff
      border-bottom: 1px solid #f1f1f1
      padding 0 10px
      .title-p
        flex: 0 0 105px
        padding-top: 10px
        color: #111
      .mj-input
        flex: 1
        display: flex
        p
          line-height:40px
          color:#f00
          flex: 0 0 50px
          text-align: center
        input
          min-height: 40px
          height: 40px
          border-bottom: none
    .btn-tj
      margin:20px 5%
      width:90%
    .mint-field 
      border-bottom:1px solid #f1f1f1

  .mint-popup-bottom
    width:100%

</style>